<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8">
    <title>12. Writting Extension</title>
    <script src="../lib/jquery/dist/jquery.js"></script>
    <script src='../lib/markdown-it/dist/markdown-it.js'></script>
    <script src="../lib/to-mark/dist/to-mark.js"></script>
    <script src="../lib/tui-code-snippet/dist/tui-code-snippet.js"></script>
    <script src="../lib/codemirror/lib/codemirror.js"></script>
    <script src="../lib/highlightjs/highlight.pack.js"></script>
    <script src="../lib/squire-rte/build/squire-raw.js"></script>
    <link rel="stylesheet" href="../lib/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../lib/highlightjs/styles/github.css">
    <link rel="stylesheet" href="./explain.css">
  </head>
  <body>
    <div class="explain">
      Tutorial is <a target="_blank" href="https://github.com/nhnent/tui.editor/blob/master/docs/writing-your-own-extension.md">here</a>
    </div>
    <div class="code-html">
      <script src="../dist/tui-editor-Editor.js"></script>
      <link rel="stylesheet" href="../dist/tui-editor.css">
      <link rel="stylesheet" href="../dist/tui-editor-contents.css">

      <div id="editSection"></div>
    </div>
    <script class="code-js">
      (function(root, factory) {
        if (typeof define === 'function' && define.amd) {
          define(['tui-editor'], factory);
        } else if (typeof exports === 'object') {
          factory(require('tui-editor'));
        } else {
          factory(root['tui']['Editor']);
        }
      })(this, function(Editor) {
        // define youtube extension
        Editor.defineExtension('youtube', function() {
          // runs while markdown-it transforms code block to HTML
          Editor.codeBlockManager.setReplacer('youtube', function(youtubeId) {
            // Indentify multiple code blocks
            var wrapperId = 'yt' + Math.random().toString(36).substr(2, 10);
            // avoid sanitizing iframe tag
            setTimeout(renderYoutube.bind(null, wrapperId, youtubeId), 0);

            return '<div id="' + wrapperId + '"></div>';
          });
        });

        function renderYoutube(wrapperId, youtubeId) {
          var el = document.querySelector('#' + wrapperId);
          el.innerHTML = '<iframe width="420" height="315" src="https://www.youtube.com/embed/' + youtubeId + '"></iframe>';
        }
      });

      var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        initialEditType: 'markdown',
        previewStyle: 'vertical',
        height: '300px',
        exts: ['youtube']
      });
    </script>
  </body>
</html>
